//
//  ViewController.m
//  CAShapeLayerDemo
//
//  Created by XFB on 2017/11/16.
//  Copyright © 2017年 ZhouCheng. All rights reserved.
//

#import "ViewController.h"
#import "CircleViewController.h"

@interface ViewController ()

- (IBAction)begainDrawShape:(UIButton *)sender;

@property (weak, nonatomic) IBOutlet UIView *drawViewBG;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
}

- (IBAction)begainDrawShape:(UIButton *)sender {

    /// 清空画板上的绘制层
    [self.drawViewBG.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
    
    /// 锚点中心X
    CGFloat anchorCenterX = self.view.frame.size.width/2;
    /// 锚点中心Y
    CGFloat anchorCenterY = 80;
    CGFloat delay = 0.5;
    
    /// 1.头部绘制
    CAShapeLayer *headLayer = [CAShapeLayer layer];
    CGRect headRect = CGRectMake(self.view.frame.size.width/2-80, 0, 160, 160);
    UIBezierPath *headPath = [UIBezierPath bezierPathWithRoundedRect:headRect cornerRadius:80];
    /// 开始绘制
    [self begainSetLayer:headLayer path:headPath delay:0 * delay];
    
    /// 2.脸部绘制
    CAShapeLayer *faceLayer = [CAShapeLayer layer];
    UIBezierPath *facePath = [UIBezierPath bezierPath];
    /// 定锚点设置初始线段的起点
    [facePath moveToPoint:CGPointMake(anchorCenterX - 80*sqrt(2.0)/2, anchorCenterY + 80 *sqrt(2.0)/2)];
    /**
     画三次贝塞尔曲线
     @param addCurveToPoint: 曲线的终点（不是起点）
     @param anchorCenterX-30 曲线的第一个点
     @param anchorCenterY-20 曲线的第二个点
     */
    [facePath addCurveToPoint:CGPointMake(anchorCenterX-30, anchorCenterY-20) controlPoint1:CGPointMake(anchorCenterX-80, anchorCenterY + 25) controlPoint2:CGPointMake(anchorCenterX-80, anchorCenterY - 20)];
    /// 两点之间的连线
    [facePath addLineToPoint:CGPointMake(anchorCenterX + 30, anchorCenterY - 20)];
    /// 画三次贝塞尔曲线
    [facePath addCurveToPoint:CGPointMake(anchorCenterX + 80*sqrt(2.0)/2, anchorCenterY + 80*sqrt(2.0)/2) controlPoint1:CGPointMake(anchorCenterX+80, anchorCenterY - 20) controlPoint2:CGPointMake(anchorCenterX+80, anchorCenterY + 25)];
    /// 画二元曲线(一般和moveToPoint配合使用) 第一个是曲线的终点 第二个是画曲线的基准点
    [facePath addQuadCurveToPoint:CGPointMake(anchorCenterX-80*sqrt(2.0)/2, anchorCenterY+80*sqrt(2.0)/2) controlPoint:CGPointMake(anchorCenterX, anchorCenterY+105)];
    [self begainSetLayer:faceLayer path:facePath delay:delay*1];
    
    /// 3.左眼绘制
    CAShapeLayer *leftEyeLayer = [CAShapeLayer layer];
    UIBezierPath *leftEyePath = [UIBezierPath bezierPath];
    /// 定锚点
    [leftEyePath moveToPoint:CGPointMake(anchorCenterX-30, anchorCenterY-25)];
    /// 二元曲线 第一个为终点，第二个基准点在左上角
    [leftEyePath addQuadCurveToPoint:CGPointMake(anchorCenterX-15, anchorCenterY-45) controlPoint:CGPointMake(anchorCenterX-30, anchorCenterY-45)];
    /// 二元曲线 第一个为终点，第二个基准点在右上角
    [leftEyePath addQuadCurveToPoint:CGPointMake(anchorCenterX, anchorCenterY-25) controlPoint:CGPointMake(anchorCenterX, anchorCenterY-45)];
    /// 二元曲线 第一个为终点，第二个基准点在右下角
    [leftEyePath addQuadCurveToPoint:CGPointMake(anchorCenterX-15, anchorCenterY-5) controlPoint:CGPointMake(anchorCenterX, anchorCenterY-5)];
    /// 二元曲线 第一个为终点，第二个基准点在左下角
    [leftEyePath addQuadCurveToPoint:CGPointMake(anchorCenterX-30, anchorCenterY-25) controlPoint:CGPointMake(anchorCenterX-30, anchorCenterY-5)];
    [self begainSetLayer:leftEyeLayer path:leftEyePath delay:delay*2];

    /// 4.左眼珠绘制
    CAShapeLayer *leftEyeBallLayer = [CAShapeLayer layer];
    /// 画圆
    UIBezierPath *leftEyeBallPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(anchorCenterX-5, anchorCenterY-30) radius:2.5 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [self begainSetLayer:leftEyeBallLayer path:leftEyeBallPath delay:delay*3];

    /// 5.右眼绘制
    CAShapeLayer *rightEyeLayer = [CAShapeLayer layer];
    UIBezierPath *rightEyePath = [UIBezierPath bezierPath];
    /// 定锚点
    [rightEyePath moveToPoint:CGPointMake(anchorCenterX, anchorCenterY-25)];
    /// 二元曲线 第一个为终点，第二个基准点在左上角
    [rightEyePath addQuadCurveToPoint:CGPointMake(anchorCenterX+15, anchorCenterY-45) controlPoint:CGPointMake(anchorCenterX, anchorCenterY-45)];
    /// 二元曲线 第一个为终点，第二个基准点在右上角
    [rightEyePath addQuadCurveToPoint:CGPointMake(anchorCenterX+30, anchorCenterY-25) controlPoint:CGPointMake(anchorCenterX+30, anchorCenterY-45)];
    /// 二元曲线 第一个为终点，第二个基准点在右下角
    [rightEyePath addQuadCurveToPoint:CGPointMake(anchorCenterX+15, anchorCenterY-5) controlPoint:CGPointMake(anchorCenterX+30, anchorCenterY-5)];
    /// 二元曲线 第一个为终点，第二个基准点在左下角
    [rightEyePath addQuadCurveToPoint:CGPointMake(anchorCenterX, anchorCenterY-25) controlPoint:CGPointMake(anchorCenterX, anchorCenterY-5)];
    [self begainSetLayer:rightEyeLayer path:rightEyePath delay:delay*4];

    /// 6.右眼珠绘制
    CAShapeLayer *rightEyeBallLayer = [CAShapeLayer layer];
    UIBezierPath *rightEyeBallPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(anchorCenterX+5, anchorCenterY-30) radius:2.5 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [self begainSetLayer:rightEyeBallLayer path:rightEyeBallPath delay:delay*5];
    
    /// 7.红鼻子绘制
    CAShapeLayer *noseLayer = [CAShapeLayer layer];
    UIBezierPath *nosePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(anchorCenterX, anchorCenterY) radius:10 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [self begainSetLayer:noseLayer path:nosePath delay:delay*6];
    
    /// 8.红鼻子里面的白色光晕 绘制
    CAShapeLayer *noseHaloLayer = [CAShapeLayer layer];
    UIBezierPath *noseHaloPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(anchorCenterX-5, anchorCenterY-4) radius:2.5 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [self begainSetLayer:noseHaloLayer path:noseHaloPath delay:delay*7];

    /// 9.嘴巴绘制
    CAShapeLayer *mouthLayer = [CAShapeLayer layer];
    UIBezierPath *mouthPath = [UIBezierPath bezierPath];
    /// 定锚点
    [mouthPath moveToPoint:CGPointMake(anchorCenterX-60, anchorCenterY+25)];
    /// 画二元曲线 第一个为终点 第二个为基准点底部
    [mouthPath addQuadCurveToPoint:CGPointMake(anchorCenterX+60, anchorCenterY+25) controlPoint:CGPointMake(anchorCenterX, anchorCenterY+90)];
    [self begainSetLayer:mouthLayer path:mouthPath delay:delay*8];

    /// 10.竖直的线
    CAShapeLayer *mouthLayer1 = [CAShapeLayer layer];
    UIBezierPath *mouthPath1 = [UIBezierPath bezierPath];
    /// 定锚点
    [mouthPath1 moveToPoint:CGPointMake(anchorCenterX, anchorCenterY + 10)];
    /// 连线
    [mouthPath1 addLineToPoint:CGPointMake(anchorCenterX, anchorCenterY+55)];
    [self begainSetLayer:mouthLayer1 path:mouthPath1 delay:delay*9];

    /// 11.胡须 左侧上中下
    [self begainAddBeardFromStartPoint:CGPointMake(anchorCenterX-58, anchorCenterY-5) endPoint:CGPointMake(anchorCenterX-15, anchorCenterY+10) delay:delay*10];
    [self begainAddBeardFromStartPoint:CGPointMake(anchorCenterX-68, anchorCenterY+15) endPoint:CGPointMake(anchorCenterX-15, anchorCenterY+20) delay:delay*11];
    [self begainAddBeardFromStartPoint:CGPointMake(anchorCenterX-61, anchorCenterY+45) endPoint:CGPointMake(anchorCenterX-15, anchorCenterY+30) delay:delay*12];

    /// 12.胡须 右侧上中下
    [self begainAddBeardFromStartPoint:CGPointMake(anchorCenterX+58, anchorCenterY-5) endPoint:CGPointMake(anchorCenterX+15, anchorCenterY+10) delay:delay*13];
    [self begainAddBeardFromStartPoint:CGPointMake(anchorCenterX+68, anchorCenterY+15) endPoint:CGPointMake(anchorCenterX+15, anchorCenterY+20) delay:delay*14];
    [self begainAddBeardFromStartPoint:CGPointMake(anchorCenterX+61, anchorCenterY+45) endPoint:CGPointMake(anchorCenterX+15, anchorCenterY+30) delay:delay*15];

    /// 13.左手绘制
    CAShapeLayer *leftHandLayer = [CAShapeLayer layer];
    UIBezierPath *leftHandPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(anchorCenterX-95, anchorCenterY+110) radius:20 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [self begainSetLayer:leftHandLayer path:leftHandPath delay:delay*16];
    
    /// 14.左侧胳膊绘制
    /// 锚点距离终点的X的距离
    CGFloat distanceXToAnchorCenter = 80*cos(M_PI_2*4/9);
    /// 锚点距离终点的Y的距离
    CGFloat distanceYToAnchorCenter = 80*sin(M_PI_2*4/9);
    CAShapeLayer *leftArmLayer = [CAShapeLayer layer];
    UIBezierPath *leftArmPath = [UIBezierPath bezierPath];
    /// 定锚点
    [leftArmPath moveToPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter, anchorCenterY + distanceYToAnchorCenter)];
    [leftArmPath addLineToPoint:CGPointMake(anchorCenterX-95, anchorCenterY+90)];
    /// 添加二元曲线
    [leftArmPath addQuadCurveToPoint:CGPointMake(anchorCenterX-75, anchorCenterY+110) controlPoint:CGPointMake(anchorCenterX-92, anchorCenterY + 107)];
    [leftArmPath addLineToPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter+1.5, anchorCenterY+95)];
//    [leftArmPath addLineToPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter+23, anchorCenterY+70)];
    [self begainSetLayer:leftArmLayer path:leftArmPath delay:delay*17];

    /// 围巾绘制
    CAShapeLayer *mufflerLayer = [CAShapeLayer layer];
    UIBezierPath *mufflerPath = [UIBezierPath bezierPath];
    /// 定锚点 起点
    [mufflerPath moveToPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter, anchorCenterY+distanceYToAnchorCenter)];
    /// 画围巾上面的二元曲线 第一个是终点 第二个是基准点
    [mufflerPath addQuadCurveToPoint:CGPointMake(anchorCenterX+distanceXToAnchorCenter, anchorCenterY+distanceYToAnchorCenter) controlPoint:CGPointMake(anchorCenterX, anchorCenterY+109)];
    /// 围巾上上面的线条
    [mufflerPath addLineToPoint:CGPointMake(anchorCenterX+distanceXToAnchorCenter+2, anchorCenterY+distanceYToAnchorCenter+7)];
    /// 画围巾下面的二元曲线 第一个为终点，第二个为基准点
    [mufflerPath addQuadCurveToPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter-4, anchorCenterY+distanceYToAnchorCenter+5) controlPoint:CGPointMake(anchorCenterX, anchorCenterY+115)];
    /// 连接锚点
    [mufflerPath addLineToPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter, anchorCenterY+distanceYToAnchorCenter)];
    [self begainSetLayer:mufflerLayer path:mufflerPath delay:delay*18];
    
    /// 身体绘制
    CAShapeLayer *bodyLayer = [CAShapeLayer layer];
    UIBezierPath *bodyPath = [UIBezierPath bezierPath];
    /// 定身体的锚点
    [bodyPath moveToPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter, anchorCenterY+distanceYToAnchorCenter+7)];
    /// 画身体的二元曲线 稍微有点点曲线，其实可以直线下来 用addLinePoint
    [bodyPath addQuadCurveToPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter + 5, anchorCenterY + 150) controlPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter+2, anchorCenterY + 140)];
    /// 画脚部上面的二元曲线
    [bodyPath addQuadCurveToPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter+3, anchorCenterY+170) controlPoint:CGPointMake(anchorCenterX-distanceXToAnchorCenter, anchorCenterY+160)];
    /// 画脚步上面的 底部平面左
    [bodyPath addQuadCurveToPoint:CGPointMake(anchorCenterX-8, anchorCenterY+170) controlPoint:CGPointMake(anchorCenterX-(distanceXToAnchorCenter+5)/2, anchorCenterY+175)];
    /// ^二元曲线绘制 一次绘制^ 无需两次
    [bodyPath addQuadCurveToPoint:CGPointMake(anchorCenterX+8, anchorCenterY+170) controlPoint:CGPointMake(anchorCenterX, anchorCenterY+155)];
    /// 画脚步上面的 底部平面右
    [bodyPath addQuadCurveToPoint:CGPointMake(anchorCenterX+distanceXToAnchorCenter-3, anchorCenterY+170) controlPoint:CGPointMake(anchorCenterX+(distanceXToAnchorCenter+5)/2, anchorCenterY+175)];
    [bodyPath addQuadCurveToPoint:CGPointMake(anchorCenterX+distanceXToAnchorCenter-5, anchorCenterY+150) controlPoint:CGPointMake(anchorCenterX+distanceXToAnchorCenter-2, anchorCenterY + 160)];
    [bodyPath addQuadCurveToPoint:CGPointMake(anchorCenterX+distanceXToAnchorCenter, anchorCenterY+distanceYToAnchorCenter+8) controlPoint:CGPointMake(anchorCenterX+distanceXToAnchorCenter-2, anchorCenterY+140)];
    [self begainSetLayer:bodyLayer path:bodyPath delay:delay*4];
    
    /// 左脚绘制
    
    /// 右脚绘制
    
    /// 肚子绘制
    
    /// 铃铛绘制
    
    /// 铃铛上的小圆点绘制
    
    /// 口袋绘制
    
    /// 右胳膊绘制
    
    
}


/**
 开始绘制胡须

 @param startPoint 开始点（锚点）
 @param endPoint 终止点
 @param delay 延时
 */
- (void)begainAddBeardFromStartPoint:(CGPoint)startPoint
                            endPoint:(CGPoint)endPoint
                               delay:(CFTimeInterval)delay
{
    CAShapeLayer *beardLayer = [CAShapeLayer layer];
    UIBezierPath *beardPath = [UIBezierPath bezierPath];
    [beardPath moveToPoint:startPoint];
    [beardPath addLineToPoint:endPoint];
    [self begainSetLayer:beardLayer path:beardPath delay:delay];
}



- (void)begainSetLayer:(CAShapeLayer *)layer
                  path:(UIBezierPath *)path
                 delay:(CFTimeInterval)delay
{
    /// 1.绘制路径
    layer.path = path.CGPath;
    /// 2.中间填充颜色
    layer.fillColor = [UIColor clearColor].CGColor;
    /// 3.线条绘制颜色
    layer.strokeColor = [UIColor orangeColor].CGColor;
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delay * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        
        /// 1.添加到drawViewBG层
        [self.drawViewBG.layer addSublayer:layer];

        /// 2.添加动画
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        animation.fromValue = @(0.0);
        animation.toValue = @(1);
        animation.duration = delay;
        [layer addAnimation:animation forKey:nil];

    });
}


- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    /// 跳转到新的控制器
    CircleViewController *circleVC = [[CircleViewController alloc] init];
    [self presentViewController:circleVC animated:YES completion:nil];
}




@end
